<!DOCTYPE html style="height:100%" >

<head>

  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  
  <title>Wo liegt Was?</title>
  
  <!-- Google Maps API -->
  <script type="text/javascript" 
  		  src="http://maps.google.com/maps/api/js?v=3.5&sensor=false">
  </script>
  
  <!-- MarkerWithLabel -->
  <script type="text/javascript" 
  		  src="js/markerwithlabel.js">
  </script>
  
  <!-- JQuery -->
  <script type="text/javascript" 
  		  src="js/jquery-1.6.2.min.js">
  </script>
  
  <!-- Fehleranzeige -->
  <script type="text/javascript" 
         src="js/standardError.js">
  </script>
  
  <script type="text/javascript">

	// Startposition --> Ausrichtung der Karte über Europa
	var geo_start = new google.maps.LatLng(50.553861, 9.6743390);

	// Wurde das Spiel bereits gestartet?
	var gameStarted = false;
	
	// Speichert die Anzahl der Fragen
	var anzahlFragen;

	// Counter für den Durchlauf der Fragen
	var questionCounter = -1;
	
	// Abspeicherung der Gesamtstrecke während des Spiels
	var gesamtStrecke = 0;
	
	// Karte initialisieren
	var map = null;
	
	// Definieren der Icons
    var customIcons = {
      question: {
        icon: './icons/question.png',
      },
	  answer: {
        icon: './icons/answer.png',
      }  
    };
	
	// Icon Antwortmarker setzen
	var type = "question";
	var icon = customIcons[type] || {};
	
	// Array zum speichern der Fragen
	var questions = [];
	
	// Antwortmarker des Benutzers
	var antwortMarker = null;
	
	// Marker der jeweils richtigen Antwort
	var fragenMarker = null;
	
	// Line zwischen falscher und richtiger Antwort
	var myLine = null;
	
	// Dient zur Ermittlung des optimalen Zoomfaktors
	// und der Ausrichtung der Karte
	var latlngbounds = new google.maps.LatLngBounds();
	var ergBounds = new google.maps.LatLngBounds();
	
	// Daten eines Spielers in der Datenbank ablegen
	function insertEintrag(){
	
	var ajaxRequest; 
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				standardError("Es ist ein Fehler aufgetreten: " +e);
				return false;
			}
		}
	}
	
	// Callback Methode
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
		
		// Information für den Spieler, dass seine Daten
		// erfolgreich erfasst wurden
		standardInfo("Ihre Daten wurden erfolgreich erfasst. Vielen Dank für Ihre Teilnahme.");
		
		// Nicht benötigte Elemente für ein neues Spiel
		// von der Karte ausblenden
		document.getElementById("wlw_gameEnd").style.visibility = 'hidden';
		
		// Reload der Seite
		location.reload();
		}
	}
	
	// Anrede setzen: Männlich oder weiblich
	if(document.getElementById("rad_anrede").checked == true){
		var anrede = "H";
	}
	else{
		var anrede = "F";
	}
	
	// Eingaben des Spielers abfragen
	var vorname = document.getElementById('txt_vorname').value;
	var nachname = document.getElementById('txt_nachname').value;
	var plz = document.getElementById('txt_plz').value;
	var strasse = document.getElementById('txt_strasse').value;
	var ort = document.getElementById('txt_ort').value;
	var telefon = document.getElementById('txt_telefon').value;
	var punkte = gesamtStrecke;
	var email = document.getElementById('txt_email').value;
	
	// Werte per GET Request an eine externe Datei
	// zur Verarbeitung übergeben
	var queryString = "?anrede=" + anrede +
					  "&vorname=" + vorname +
					  "&nachname=" + nachname +
					  "&plz=" + plz +
					  "&strasse=" + strasse +
					  "&ort=" + ort +
					  "&telefon=" + telefon +
					  "&punkte=" + punkte +
					  "&email=" + email;
					  
	try {
		// Request öffnen
		ajaxRequest.open("GET", "send.php" + queryString, true);

	} catch (e) {
		standardError("Es ist ein Fehler aufgetreten: " +e);
	}
	
	// AJAX-Request senden
	ajaxRequest.send(null); 
}


	// Laden der Seite, initialisieren der Karte
    function load() {
		
	  // Startscreen vorbereiten: Nicht benötigte
	  // Elemente werden ausgeblendet
	  document.getElementById("nextQuestion").style.visibility = 'hidden';
	  document.getElementById("LogErgebnis").style.visibility = 'hidden';
	  document.getElementById("wlw_gameEnd").style.visibility = 'hidden';
	  document.getElementById("wlw_output").style.visibility = 'hidden';
	  document.getElementById("wlw_question").style.visibility = 'hidden';
	  document.getElementById("toplistPanel").style.visibility = 'hidden';
	  document.getElementById("noClick").style.zIndex = 0;
	  
	  // Formularwerte in den ursprünglichen Zustand versetzen
	  document.getElementById("txt_vorname").value = "vorname";
	  document.getElementById("txt_nachname").value = "nachname";
	  document.getElementById("txt_strasse").value = "strasse";
	  document.getElementById("txt_plz").value = "PLZ";
	  document.getElementById("txt_ort").value = "ort";
	  document.getElementById("txt_telefon").value = "telefon";
	  document.getElementById("txt_email").value = "email";
		
	  // Karte initialisieren
      map = new google.maps.Map(document.getElementById("map"), {
			mapTypeId: 'terrain',
			disableDefaultUI: true,
			mapTypeId: google.maps.MapTypeId.TERRAIN
      });

      // Fragen aus der Datenbank laden
      downloadUrl("getQuestions.php", function(data) {
        
		// XML Dokument verarbeiten
		var xml = parseXml(data);
        var markers = xml.documentElement.getElementsByTagName("marker");
		
		// Fragen einzeln auslesen
        for (var i = 0; i < markers.length; i++) {
	
			// Frage zum entsprechenden Marker
          	var frage = markers[i].getAttribute("frage");
       
			// Längen und Breitengrad extrahieren
		  	var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("geoX")),
              parseFloat(markers[i].getAttribute("geoY"))
			);
			
			// Das Rechteck latlngbounds um den Aktuellen Punkt erweitertn
		  	latlngbounds.extend(point);
			
			// Icon Antwortmarker setzen
			var type = "answer";
			var icon = customIcons[type] || {};
			
			// Marker setzen
          	var marker = new google.maps.Marker({
				map: map,
				icon: icon.icon,
				position: point,
				frage: frage
         	});
		  
		    // Marker unsichtbar machen
		    marker.setVisible(false);
			
			// Marker in Array mit allen Fragenmarkern speichern
		  	questions.push(marker);
	
        }
      });
	  
	  // Die Karte auf die Startposition ausrichten
	  map.fitBounds(latlngbounds);
	  map.setCenter(geo_start);

	  // Marker mit welchem der Spieler seine
	  // Antwortpunkte auf der Karte platzieren kann
	  antwortMarker = new MarkerWithLabel({
		   position: geo_start,
		   icon: icon.icon,
		   draggable: false,
		   raiseOnDrag: false,
		   map: map,
		   labelContent: "",
		   labelAnchor: new google.maps.Point(100, 0),
		   labelClass: "labels"
     });
		
	  // Antwortmarker ausblenden, da dieser erst
	  // bei klicken auf die Karte erscheinen soll
	  antwortMarker.setVisible(false);
	  
	  // Event --> Klicken auf die Karte
	  google.maps.event.addListener(map, 'click', function(event) {
		
		// Erst wenn ein Marker vom Benutzer auf der Karte
		// platziert wurde, erhält der Spieler die Möglichkeit
		// das Ergebnis einzuloggen --> LogErgebnis
		document.getElementById("LogErgebnis").style.visibility = 'visible';

		// Marker setzen
		placeMarker(event.latLng);
 	  });
	  
    }
	
	// Den eigenen gesetzten Marker an der Stelle des
	// Mausklicks positionieren
	function placeMarker(location) {
		  if(gameStarted == true){
			  antwortMarker.setPosition(location);
			  antwortMarker.setVisible(true);
			  
		  }
	}
	
	// Erzeugt eine Liste mit den Spielern,
	// die das Beste Spielergebnis erzielt haben
	// (Das Beste Spielergbnis hat der Spieler mit den 
	// wenigesten Entfernungskilometern)
	function showToplist(){

	  // Spielerdaten aus der Datenbank laden (XML)
      downloadUrl("generateToplist.php", function(data) {
        
		// XML Dokument lesen
		var xml = parseXml(data);
        var markers = xml.documentElement.getElementsByTagName("marker");
		
		///////////////////////////////////////////////////////
		///Erstellen einer Dynamischen Tabelle mit JavaScript//
		///////////////////////////////////////////////////////
		
		var myTable = document.createElement("table");
		myTable.className = "toplist_Table"; 
		var mytablehead = document.createElement("thead");
		mytablehead.className = "toplistTableHead";
			mycurrent_row = document.createElement("tr");
		
					mycurrent_cell = document.createElement("td");
					mycurrent_cell.setAttribute("colspan", 3);                 
                    currenttext = document.createTextNode("Die besten Spielergebnisse:");
                    mycurrent_cell.appendChild(currenttext);
                    mycurrent_row.appendChild(mycurrent_cell);
	
		 mytablehead.appendChild(mycurrent_row);
		 myTable.appendChild(mytablehead);
		
		
		var mytablebody = document.createElement("tbody");

		// Die Topliste mit den Spielern füllen
        for(var j = 0; j < markers.length; j++) {
			
			// Zeile erstellen
            mycurrent_row = document.createElement("tr");
				
					// Platz
					mycurrent_cell = document.createElement("td");
					mycurrent_cell.className= "toplistTableBodyRank";             
                    currenttext = document.createTextNode(j+1 +".");
                    mycurrent_cell.appendChild(currenttext);
                    mycurrent_row.appendChild(mycurrent_cell);
					
					// Spielername
                    mycurrent_cell = document.createElement("td"); 
					mycurrent_cell.className= "toplistTableBodyGamer";                
                    currenttext = document.createTextNode(markers[j].getAttribute("vorname") +", " + markers[j].getAttribute("nachname"));
                    mycurrent_cell.appendChild(currenttext);
                    mycurrent_row.appendChild(mycurrent_cell);

					// Punkte
					mycurrent_cell = document.createElement("td");               
                    currenttext = document.createTextNode(markers[j].getAttribute("punkte"));
                    mycurrent_cell.appendChild(currenttext);
                    mycurrent_row.appendChild(mycurrent_cell);
			
			// Zeile hinzufügen
            mytablebody.appendChild(mycurrent_row);
    }
	
    myTable.appendChild(mytablebody);
	document.getElementById("toplistPanel").appendChild(myTable);
	document.getElementById("toplistPanel").style.visibility = 'hidden';

		});
		
	}
	
	// DEG to RAD zur Berechnung der Entfernung
	function toRad(deg)
        {
                return deg * Math.PI/180;
        }
	
	// Auswertung einer Antwort
	// Anzeige des Ergebnisses / Berechnung der Entfernung in km
	function berechneErgebnis(){
		
		gameStarted = false;
		
		// Die Entfernung zwischen dem gesetzen Marker 
		// und dem Antwortmarker berechnen
		var R = 6371;
		
		var dLat = toRad(fragenMarker.getPosition().lat()-antwortMarker.getPosition().lat());
		var dLon = toRad(fragenMarker.getPosition().lng()-antwortMarker.getPosition().lng());

		var dLat1 = toRad(antwortMarker.getPosition().lat());
		var dLat2 = toRad(fragenMarker.getPosition().lat());

		var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
						Math.cos(dLat1) * Math.cos(dLat1) *
						Math.sin(dLon/2) * Math.sin(dLon/2);
		var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
		var d = R * c;
		d = Math.round(d);
		
		// Gesamtstrecke aufsummieren
		gesamtStrecke = gesamtStrecke + d;

		 // Ergebnis ausgeben
		 document.getElementById("wlw_output").innerHTML = "Entfernung: <b>"+d +" KM</b><br/> Gesamtentfernung: <b>"+ gesamtStrecke +" KM</b";
		 // Elemente dem aktuellen Zustand anpassen
		 document.getElementById("nextQuestion").style.visibility = 'visible';
		 document.getElementById("LogErgebnis").style.visibility = 'hidden';
		 document.getElementById("wlw_output").style.visibility = 'hidden';
		 document.getElementById("wlw_question").style.visibility = 'hidden';
		 document.getElementById("noClick").style.zIndex = 50;
		 
		 // Die letzte Frage wurde beantwortet...
		 if(questionCounter == anzahlFragen-1){
			document.getElementById("nextQuestion").style.visibility = 'hidden';
			document.getElementById("wlw_question").style.visibility = 'hidden';
			document.getElementById("wlw_output").style.visibility = 'hidden';
			document.getElementById("wlw_gameEnd").style.visibility = 'visible';
			document.getElementById("kmAusgabe").innerHTML = gesamtStrecke +" km";
			showToplist();
		 }
		 
	// Ausgabe des Markers und der dazugehörigen 
	// Entfernung in Kilometern
	fragenMarker.setVisible(true);
	antwortMarker.labelClass = "labels";
	antwortMarker.labelContent = d +"km vom Ziel entfernt";
		
	// Pfad festlegen zwischen dem Antwortpunkt und dem
	// durch den Benutzer gesetzten Punkt 
	var path = [
    	new google.maps.LatLng(fragenMarker.getPosition().lat(), fragenMarker.getPosition().lng()),
    	new google.maps.LatLng(antwortMarker.getPosition().lat(), antwortMarker.getPosition().lng()),
    ];
		 
	// Polyline Objekt initialisieren
	myLine = new google.maps.Polyline({
		path: path,
		strokeColor: "#000000",
		strokeOpacity: 1.0,
		strokeWeight: 2.0
    });
  
  	// Linie auf der Karte platzieren
  	myLine.setMap(map);

	// Punkt des durch den Beutzer gesetzten
	// Markers ermitteln
	var pointFrage = new google.maps.LatLng(
        fragenMarker.getPosition().lat(),
        fragenMarker.getPosition().lng()
	);
		
	// Punkt der Antwort bestimmen	
	var pointAntwort = new google.maps.LatLng(
        antwortMarker.getPosition().lat(),
        antwortMarker.getPosition().lng()
	);
	
	// Antwort und Fragenmarker zu einem
	// LatLngBounds Objekt hinzufügen
	ergBounds.extend(pointFrage);
	ergBounds.extend(pointAntwort);
	
	// Die Karte so ausrichten, dass Antwortmarker
	// und Fragenmarker zu sehen sind
	map.fitBounds(ergBounds);
	
	// Den Zoomfaktor bei kleinen Entfernungen
	// so anpassen, dass alles problemlos sichtbar ist
	var zoom = map.getZoom();
	if(zoom > 10){
		map.setZoom(zoom-2);
	}

}
	
	// Stellt dem Spieler die nächste Frage
	function stelleFrage(){
		
		// LatLngBOunds Objekt zur Ausrichtung des Sichtfensters
		ergBounds = new google.maps.LatLngBounds();
		
		// Karte positionieren
		map.setCenter(geo_start);
		map.setZoom(5);
		
		gameStarted = true;
		
		// Label des Markers ausblenden
		// Dieses soll nur nach Bestätigung der Antwort
		// zur Anzeige der Entfernung sichtbar sein
		antwortMarker.labelContent = "";
		antwortMarker.labelClass = "labels_hidden";
		
		// Antwortmarker und Fragenmarker von den
		// vorherigen Fragen ausblenden
		antwortMarker.setVisible(false);
		fragenMarker.setVisible(false);
		
		// Polyline von vorherigen Fragen ausblenden
		myLine.setMap(null);
		
		// Die näcshte Frage abrufen
		questionCounter = questionCounter + 1;
		fragenMarker = questions[questionCounter];
		var fragenNr = questionCounter + 1;
		
		// Frage anzeigen
		document.getElementById("wlw_question").innerHTML = fragenNr+". " +fragenMarker.frage;
		document.getElementById("wlw_question").style.visibility = 'visible';
		
		// Nicht benötigte Elemente ausblenden
		document.getElementById("nextQuestion").style.visibility = 'hidden';
		document.getElementById("LogErgebnis").style.visibility = 'hidden';
		
		// Das Kartenoverlay dass in bestimmten Situationen Klicken
		// verhindern soll unter der Karte anordnen --> Karte kann geklickt werden
		document.getElementById("noClick").style.zIndex = 0;
			
	}
	
	// Das Spiel starten
	function spielStarten(){
		
		// Das Spiel wurde gestartet
		gameStarted = true;
		
		// Karte über Europa platzieren
		map.setCenter(geo_start);
		map.setZoom(5);
		
		// Feststellen wieviele Fragen gestellt werden
		anzahlFragen = questions.length;
		
		// Die Karte vorbereiten. Nur die Elemente die benötigt werden
		// sind auch sichtbar
	    document.getElementById("wlw_question").style.visibility = 'visible';
	 	document.getElementById("nextQuestion").style.visibility = 'visible';
	    document.getElementById("LogErgebnis").style.visibility = 'visible';
		document.getElementById("startGame").style.visibility = 'hidden';
		document.getElementById("div_center").style.visibility = 'hidden';
		document.getElementById("LogErgebnis").style.visibility = 'hidden';
		document.getElementById("nextQuestion").style.visibility = 'hidden';
		
		// Fragenzähler auf 0 setzen
		questionCounter = 0;
		
		// Gesamtstrecke auf 0 setzen
		gesamtStrecke = 0;	
		
		// Das Label des Antwortmarkers ausblenden
		antwortMarker.labelContent = "";
		antwortMarker.labelClass = "labels_hidden";
		
		var fragenNr = questionCounter+1;
		fragenMarker = questions[questionCounter];
		
		// Die erste Frage stellen
		document.getElementById("wlw_question").innerHTML = fragenNr+". " +fragenMarker.frage;
		
	}
	

	// AJAX Request senden
    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          callback(request.responseText, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

	// XML parsen...
    function parseXml(str) {
      if (window.ActiveXObject) {
        var doc = new ActiveXObject('Microsoft.XMLDOM');
        doc.loadXML(str);
        return doc;
		
      } else if (window.DOMParser) {
        return (new DOMParser).parseFromString(str, 'text/xml');
      }
    }

	// Das Formular zur Eingabe der eigenen Daten
	// auf dem Spielfeld anzeigen
	function showFormular(){
		$('#button_showFormular').fadeOut(500);
		$('#formular').delay(500).slideDown(500);	
	}
	
	// Text aus Textfeld entfernen
	function clearTextfield(element, text){
                if(element.value == text){
                    element.value = '';
                }
            }
			
    // Textfeld mit vorgegebenem Text füllen    
	function fillTextfield(element, text){
		if(element.value == ''){
			element.value = text;	
		}
	}

</script>
  
  <link href="css/places.css" 
  		rel="stylesheet" 
        type="text/css">
        
    <link href="css/error.css" 
    	  rel="stylesheet" 
          type="text/css" />
        
</head>

<body style="height:100%" leftmargin="0" topmargin="0"
             marginwidth="0" marginheight="0" onload="load();">

	<!-- Layer zum verhindern von Klicks auf der Karte -->
  	<div class="noClick" id="noClick">
    
    </div>
    
     <!-- Ausgabe von Fehlern -->
    <div id="errorInfo" class="errorInfo">
    
    </div>
    
    <!-- Informationen ausgeben -->
    <div id="OkInfo" class="OkInfo">
    
    </div>
    
    <!-- Karte -->
	<div id="map" style="width:100%; height:100%;">
    
    </div>

	<!-- Fenster zur Anzeige des aktuellen Spielstandes (deaktiviert) -->
    <div class="wlw_output" id="wlw_output"> 
    
    </div>
    
    <!-- Fenster zur Anzeige der Frage -->
	<div class="wlw_question" id="wlw_question"> 
    
    </div>
    
    <!-- Anzeige des Spielergebnisses -->
	<div class="wlw_gameEnd" id="wlw_gameEnd">
    
    <!-- Ausgabe des Spielergebnisses / Formular zur Gewinnspielteilnahme -->
    <div class="spielergebnis">
       <center>
                Herzlichen Glückwunsch. Du hast das Spiel erfolgreich abgeschlossen!
                Du warst dabei insgesamt um
                
                <!-- Ausgabe der erreichten KM -->
                <div id="kmAusgabe" class="kmAusgabe">
                
                </div>
                
                von den Zielen entfernt. <br>
              
                <input id="button_showFormular" name="" class="button" type="button"
                 value="Am Gewinnspiel teilnehmen!" onClick="showFormular();">
        
            	<br>
        
        			<!-- Formular: Spielerdaten erfassen -->
          			<div class="formular" id="formular">
    
                      <input name="rad_anrede" type="radio" id="rad_anrede" value="h" checked>
                      Herr
                      <input type="radio" name="rad_anrede" value="f" id="rad_frau">
                      Frau
    
                	  <br>
                      <br>
                
                        <input class="inputFieldPlayer" name="txt_vorname" type="text" value="vorname"
                        size="40" maxlength="40" onFocus="clearTextfield(this, 'vorname');" 
                        onblur="fillTextfield(this, 'vorname');" id="txt_vorname" />
                        <br />
                        <br />
                        <input class="inputFieldPlayer" name="txt_nachname" type="text" value="nachname" size="40"
                        maxlength="40" id="txt_nachname" onFocus="clearTextfield(this, 'nachname');"
                        onblur="fillTextfield(this, 'nachname');"/>
                        <br />
                        <br />
                        <input class="inputFieldPlayer" name="txt_strasse" type="text" value="strasse" size="40"
                        maxlength="40" id="txt_strasse" onFocus="clearTextfield(this, 'strasse');"
                        onblur="fillTextfield(this, 'strasse');"/>
                        <br />
                        <br />
                        <input class="inputFieldPlayer" name="txt_plz" type="text" value="PLZ" size="40"
                        maxlength="40" id="txt_plz" onFocus="clearTextfield(this, 'PLZ');"
                        onblur="fillTextfield(this, 'PLZ');"/>
                        <br />
                        <br />
                        <input class="inputFieldPlayer" name="txt_ort" type="text" value="ort" size="40"
                        maxlength="40" id="txt_ort" onFocus="clearTextfield(this, 'ort');"
                        onblur="fillTextfield(this, 'ort');"/>
                        <br>
                        <br>
                        <input class="inputFieldPlayer" name="txt_telefon" type="text" value="telefon" size="40"
                        maxlength="40" id="txt_telefon" onFocus="clearTextfield(this, 'telefon');"
                        onblur="fillTextfield(this, 'telefon');"/>
                        <br>
                        <br>
                        <input class="inputFieldPlayer" name="txt_email" type="text" value="email" size="40"
                        maxlength="40" id="txt_email" onFocus="clearTextfield(this, 'email');" 
                        onblur="fillTextfield(this, 'email');"/>
                        <br>
                        <div class="buttons">
                        <button type="button" class="button" name="send" onClick="insertEintrag();"> Absenden </button>
        
                      </center>
              		</div>
             </div>
  </div>

	<!-- Button: Spiel starten -->
    <div class="div_center" id="div_center">
        <input type="button" class="cmd_next" name="button3" id="startGame" value="Spiel Starten" onClick="spielStarten();">
    </div>
    
    <!-- Button: Nächste Frage -->
    <div class="control_logg_right" id="control">
        <center>
        	<input class="cmd_next" type="button" name="button" id="nextQuestion" value="Nächste Frage" onClick="stelleFrage();">
        </center>
    </div>
  
    <!-- Button: Antwort einloggen -->
 	<div class="control_logg_left" id="control">
        <center>
        <input class="cmd_ok" type="button" name="button2" id="LogErgebnis" value="Eingabe bestätigen" onClick="berechneErgebnis();">
        </center>
    </div>
    
	<!-- Anzeige der Topliste (deaktiviert) -->
    <div class="toplistPanel" id="toplistPanel"> 
    
    </div>

</body>
</html>